<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flavor Some Recipes</title>
    <link rel="stylesheet" href="https://flavorsomerecipes.com{{ url_for('static', filename='styles1.css') }}">
    <link rel="stylesheet" href="https://flavorsomerecipes.com{{ url_for('static', filename='header.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favorites.icon') }}" type="image/x-icon">
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?38fcc093c940c38c72f6ed7e10f47097";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
    {% include 'header.html' %}
    <main>
      <div class="grid-container">
        {% for key,path,img,desc,tag in topics %}
            <section id="{{ key }}">
                <h2>{{ key }}</h2>
                <div class="recipe-list">
                    <article>
                        <h3><a href="https://flavorsomerecipes.com{{ path }}">
                        <img src="https://flavorsomerecipes.com{{ img }}">{{ desc }}</a></h3>
                        <h5>Tag:</h5> 
                        <p>{{ tag }}</p>
                    </article>
                </div>
            </section>
        {% endfor %}
      </div>
    </main>
    {% include 'footer.html' %}
    <script src="/static/recipes.js"></script>
</body>
</html>
